<template>
  <a-modal
    :open="visible"
    :title="isEdit ? '编辑技师' : '新增技师'"
    width="800px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="技师编号" name="id">
            <a-input
              v-model:value="formData.id"
              placeholder="请输入技师编号"
              :disabled="isEdit"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="姓名" name="name">
            <a-input
              v-model:value="formData.name"
              placeholder="请输入技师姓名"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="性别" name="gender">
            <a-radio-group v-model:value="formData.gender">
              <a-radio value="male">男</a-radio>
              <a-radio value="female">女</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号" name="phone">
            <a-input
              v-model:value="formData.phone"
              placeholder="请输入手机号"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="邮箱" name="email">
            <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="入职时间" name="hireDate">
            <a-date-picker
              v-model:value="formData.hireDate"
              placeholder="请选择入职时间"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="部门" name="department">
            <a-select
              v-model:value="formData.department"
              placeholder="请选择部门"
            >
              <a-select-option value="按摩部">按摩部</a-select-option>
              <a-select-option value="美容部">美容部</a-select-option>
              <a-select-option value="SPA部">SPA部</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="职位" name="position">
            <a-input
              v-model:value="formData.position"
              placeholder="请输入职位"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="技能等级" name="level">
            <a-select
              v-model:value="formData.level"
              placeholder="请选择技能等级"
            >
              <a-select-option value="初级">初级</a-select-option>
              <a-select-option value="中级">中级</a-select-option>
              <a-select-option value="高级">高级</a-select-option>
              <a-select-option value="专家">专家</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="状态" name="status">
            <a-select v-model:value="formData.status" placeholder="请选择状态">
              <a-select-option value="active">在职</a-select-option>
              <a-select-option value="inactive">离职</a-select-option>
              <a-select-option value="training">培训中</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="技能专长" name="skills">
        <a-select
          v-model:value="formData.skills"
          mode="multiple"
          placeholder="请选择技能专长"
          :options="skillOptions"
        />
      </a-form-item>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="工作日期" name="workDays">
            <a-select
              v-model:value="formData.workDays"
              mode="multiple"
              placeholder="请选择工作日期"
            >
              <a-select-option value="周一">周一</a-select-option>
              <a-select-option value="周二">周二</a-select-option>
              <a-select-option value="周三">周三</a-select-option>
              <a-select-option value="周四">周四</a-select-option>
              <a-select-option value="周五">周五</a-select-option>
              <a-select-option value="周六">周六</a-select-option>
              <a-select-option value="周日">周日</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="工作时间" name="workTime">
            <a-time-picker
              v-model:value="formData.workTime"
              format="HH:mm"
              placeholder="请选择工作时间"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="备注" name="notes">
        <a-textarea
          v-model:value="formData.notes"
          :rows="3"
          placeholder="请输入备注信息"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import dayjs from 'dayjs';

interface Technician {
  id: string;
  name: string;
  avatar?: string;
  gender: 'male' | 'female';
  phone: string;
  email?: string;
  department: string;
  position: string;
  level: '初级' | '中级' | '高级' | '专家';
  status: 'active' | 'inactive' | 'training';
  hireDate: string;
  skills: string[];
  performance: {
    score: number;
    services: number;
    income: number;
  };
  schedule: {
    workDays: string[];
    workTime: string;
  };
  notes?: string;
}

interface Props {
  visible: boolean;
  technician?: Technician | null;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
  (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();

// 表单数据
const formData = ref({
  id: '',
  name: '',
  gender: 'female' as 'male' | 'female',
  phone: '',
  email: '',
  department: '',
  position: '',
  level: '初级' as '初级' | '中级' | '高级' | '专家',
  status: 'active' as 'active' | 'inactive' | 'training',
  hireDate: '',
  skills: [] as string[],
  workDays: [] as string[],
  workTime: '',
  notes: '',
});

// 技能选项
const skillOptions = [
  { label: '泰式按摩', value: '泰式按摩' },
  { label: '经脉按摩', value: '经脉按摩' },
  { label: '正骨按摩', value: '正骨按摩' },
  { label: '头皮按摩', value: '头皮按摩' },
  { label: '面部护理', value: '面部护理' },
  { label: '身体护理', value: '身体护理' },
  { label: 'SPA护理', value: 'SPA护理' },
  { label: '美甲', value: '美甲' },
  { label: '足疗', value: '足疗' },
  { label: '刮痧', value: '刮痧' },
  { label: '拔罐', value: '拔罐' },
  { label: '艾灸', value: '艾灸' },
];

// 表单验证规则
const rules = {
  id: [{ required: true, message: '请输入技师编号' }],
  name: [{ required: true, message: '请输入技师姓名' }],
  phone: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
  ],
  email: [{ type: 'email', message: '请输入正确的邮箱格式' }],
  department: [{ required: true, message: '请选择部门' }],
  position: [{ required: true, message: '请输入职位' }],
  level: [{ required: true, message: '请选择技能等级' }],
  status: [{ required: true, message: '请选择状态' }],
  skills: [{ required: true, message: '请选择技能专长' }],
  workDays: [{ required: true, message: '请选择工作日期' }],
  workTime: [{ required: true, message: '请选择工作时间' }],
};

// 计算属性
const isEdit = computed(() => !!props.technician);

// 方法
const resetForm = () => {
  formData.value = {
    id: '',
    name: '',
    gender: 'female',
    phone: '',
    email: '',
    department: '',
    position: '',
    level: '初级',
    status: 'active',
    hireDate: '',
    skills: [],
    workDays: [],
    workTime: '',
    notes: '',
  };
};

// 监听技师变化
watch(
  () => props.technician,
  (technician) => {
    if (technician) {
      // 编辑模式
      formData.value = {
        id: technician.id,
        name: technician.name,
        gender: technician.gender,
        phone: technician.phone,
        email: technician.email || '',
        department: technician.department,
        position: technician.position,
        level: technician.level,
        status: technician.status,
        hireDate: technician.hireDate,
        skills: [...technician.skills],
        workDays: [...technician.schedule.workDays],
        workTime: technician.schedule.workTime,
        notes: technician.notes || '',
      };
    } else {
      // 新增模式
      resetForm();
    }
  },
  { immediate: true },
);

const handleOk = async () => {
  try {
    await formRef.value?.validate();

    // 这里可以调用API保存数据
    message.success(isEdit.value ? '技师信息更新成功' : '技师添加成功');
    emit('success');
    emit('update:visible', false);
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};
</script>
